<template>
  <div style="height: 100%">
    <el-table
      :data="tableData"
      height="100%"
      border
      v-loading="loading"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        width="100"
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="teamviewer"
        label="teamViewer">
      </el-table-column>
      <el-table-column
        prop="class_room"
        label="教室">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === -1 ? 'info' : 'success'">{{scope.row.status === -1 ? '离线' : '在线'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="panel(scope.row)" type="primary" size="small">命令面板</el-button>
          <el-button @click="goDetail(scope.row)" type="info" size="small">命令日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <command-list ref="commandBox"></command-list>
    <log-list ref="logBox"></log-list>
  </div>
</template>

<script>
import Common from '@/api/Common'
import CommandList from '@/components/classroom/Command'
import LogList from '@/components/classroom/Log'
const _http = new Common()

export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      loading: true
    }
  },
  created () {
    setTimeout(() => {
      this.getClassroom()
    }, 20)
  },
  methods: {
    getClassroom () {
      _http.get('/device/index/lists').then(res => {
        if (res.status === 1) {
          this.tableData = res.data.list
          this.loading = false
        }
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    goDetail (row) {
      this.$refs.logBox.$emit('dialogLog', row)
    },
    panel (row) {
      this.$refs.commandBox.$emit('dialogCommand', row, this.multipleSelection)
    },
    handleSelectionChange (val) {
      let devicesNumber = val.map((row) => {
        return row.device_number
      })
      this.multipleSelection = devicesNumber
      console.log('checkBox', devicesNumber)
    }
  },
  components: {
    CommandList,
    LogList
  }
}
</script>
